<script lang="ts" setup>
import { computed } from 'vue';

import { preferences, usePreferences } from '@vben/preferences';

import { Divider } from 'ant-design-vue';

interface Tab {
  name: string;
  id: number | string;
  num: number;
}
defineProps({
  list: {
    type: Array as () => Tab[],
    default: () => [],
  },
  value: {
    type: [String, Number],
    default: '',
  },
});

const emit = defineEmits(['changle']);

// 使用 usePreferences 函数获取主题相关信息
const { isDark } = usePreferences();

// 计算当前主题
const theme = computed(() => {
  if (preferences.theme.mode === 'auto') {
    return isDark.value ? 'dark' : 'light';
  }
  return preferences.theme.mode;
});

// 点击事件
const handleTab = (item: Tab) => {
  emit('changle', item);
};
</script>

<template>
  <div>
    <div class="flex flex-wrap pt-4">
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="[
          value === item.id ? 'active' : '',
          theme === 'dark' ? 'bg-gray-700' : 'bg-gray-100',
        ]"
        class="tab-item mr-2 cursor-pointer rounded-md px-4 py-1.5"
        @click="handleTab(item)"
      >
        {{ item.name || '' }} {{ item.num || 0 }}
      </div>
    </div>
    <Divider class="my-4" />
  </div>
</template>

<style lang="scss" scoped>
.tab-item:hover {
  background: hsl(var(--primary) / 10%);
}

.tab-item.active {
  color: #fff;
  background: hsl(var(--primary));
}
</style>
